<template>
    <MiAddressEdit ref="MiAddressEditRef" v-model:isEdit="isEdit" v-if="isEdit"></MiAddressEdit>
    <div class="edit-address" v-if="isChoose">
        <div class="choose-address">
            <div class="edit-title">
                选择地址
                <img class="edit-close" @click="isChoose = false"
                    src="@/assets/img/Settlement/icon_close_circle_gray2.png" alt="">
            </div>
            <ul class="address-list">
                <li v-for="item in Address.listMain" :key="item.id">
                    <!-- 等于当前的 -->
                    <img @click="chooseAddressHandler(item)"
                        :src="AddressDefaultChoose?.id === item.id ? require('@/assets/img/Settlement/radio-yes.png') : require('@/assets/img/Settlement/radio-no.png')"
                        alt="">
                    <div>
                        <div>
                            <span class="default-address" v-if="item.isDefault">默认</span>
                            <span>{{ item.receiveRegion }}</span>
                        </div>
                        <p>{{ item.receiveDetail }}</p>
                        <p><span>{{ item.receiveName }}</span><span>{{
                        `${item.receivePhone.slice(0, 3)}****${item.receivePhone.slice(8)}` }}</span></p>
                    </div>
                    <img src="@/assets/img/Settlement/edit.png" alt="" @click="beginAddressUpdate(item)">
                </li>
            </ul>
            <div class="edit-footer">
                <button @click="beginAddressAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>添加地址</span>
                </button>
            </div>
        </div>
    </div>
    <div class="box-settlement">
        <div class="content">
            <div class="nav">
                <div class="nav-title">
                    <el-icon class="back-cart" @click="router.back()">
                        <ArrowLeftBold />
                    </el-icon>
                    <span>确认订单</span>
                </div>
                <div class="address-card" @click="isChoose = true">
                    <div class="card">
                        <div class="info-box">
                            <p class="address" v-text="AddressDefaultChoose?.receiveRegion"></p>
                            <p class="region" v-text="AddressDefaultChoose?.receiveDetail"></p>
                            <p class="info">
                                <span v-text="AddressDefaultChoose?.receiveName"></span>
                                <span style="margin-left: 18px;">{{
                                `${AddressDefaultChoose?.receivePhone.slice(0,
                                    3)}****${AddressDefaultChoose?.receivePhone.slice(8)}`
                                }}</span>
                            </p>
                        </div>
                        <el-icon>
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </div>
            </div>
            <ul class="container">
                <li v-for="item in settlementList" :key="item.id">
                    <div class="item-top">
                        <img :src="item.avatar" alt="">
                        <div>
                            <p>{{ item.name }}</p>
                            <p>
                                <span>￥{{ item.price }}</span>
                                <span class="count">x{{ item.count }}</span>
                            </p>
                            <p>7天无理由退货</p>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <div>
                            <span>发票类型</span>
                            <div>
                                <span>不开发票</span>
                                <el-icon>
                                    <ArrowRightBold />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>配送方式</span>
                            <span>快递配送</span>
                        </div>
                        <div>
                            <span>买家留言</span><input type="text" placeholder="填写内容需与商家协商并确认,45字以内" />
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="last-info">
                <li>
                    <p>商品总价</p>
                    <p>￥{{ Cart.Subtotal }}.00</p>
                </li>
                <li>
                    <p>优惠活动</p>
                    <p class="low-price">-￥0.00</p>
                </li>
                <li>
                    <p>优惠券</p>
                    <div class="not-use">
                        <span>暂无可用</span>
                        <el-icon>
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </li>
                <li>
                    <p>运费</p>
                    <p>+￥0.00</p>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div>
                <p>合计：</p>
                <span class="total">￥{{ Cart.Subtotal }}.00</span>
                <span class="not-money">免运费</span>
            </div>
            <button @click="submitOrderHandler">提交订单</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useCart, useAddress } from '@/store';
import { CartApi, AddressApi, OrderApi } from '@/api';
import MiAddressEdit from '@/components/MiAddressEdit/MiAddressEdit.vue';
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter()
const MiAddressEditRef = ref()
const Cart = useCart()
const Address = useAddress()
const settlementList = ref<Vm.Cart[]>([])
const AddressDefaultChoose = ref<Vm.Address>()
const isEdit = ref<boolean>(false)
const isChoose = ref<boolean>(false)
const submitModel = reactive<HttpPayload.Submit>({
    ids: Cart.submitIds,
    account: Cart.Subtotal,
    addressId: 0
})

onMounted(async () => {
    await Address.init()
    AddressDefaultChoose.value = Address.listMain.find((item: Vm.Address) => item.id === Address.isDefaultId)
    settlementList.value = await CartApi.getConfirmList({ ids: Cart.submitIds })
})

const chooseAddressHandler = (item: Vm.Address) => {
    AddressDefaultChoose.value = { ...item }
    isChoose.value = false
}

const beginAddressUpdate = async (item: Vm.Address): Promise<void> => {
    const loadingInstance = ElLoading.service({ text: "loading..", background: 'rgba(255,255,255,0.5)' })
    await new Promise((resolve: any): void => {
        setTimeout((): void => {
            loadingInstance.close()
            resolve()
        }, 500)
    })
    isEdit.value = true
    nextTick(() => {
        MiAddressEditRef.value.beginUpdate(item)
    })
}

const beginAddressAdd = async (): Promise<void> => {
    const loadingInstance = ElLoading.service({ text: "loading..", background: 'rgba(255,255,255,0.5)' })
    await new Promise((resolve: any): void => {
        setTimeout((): void => {
            loadingInstance.close()
            resolve()
        }, 500)
    })
    isEdit.value = true
    nextTick(() => {
        MiAddressEditRef.value.beginAdd()
    })
}
//提交订单
const submitOrderHandler = async () => {
    try {
        const orderId = await OrderApi.confirmOrder({ ...submitModel, addressId: (AddressDefaultChoose.value?.id) as number })
        Cart.isInit = false
        console.log(orderId)
        router.push({ name: 'ConfirmOrder', params: { id: orderId } })
    }
    catch (e) {/**/ }
}
</script>
<style scoped lang="stylus">
.edit-address
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    background-color rgba(0,0,0,.5)
    z-index 9

.choose-address
    position absolute
    left 0
    right 0
    bottom 0
    height 50%
    background-color #fff
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display flex
    flex-direction column
    align-items center
    

.edit-title
    height 58px
    display flex
    align-items center
    justify-content center
    color: rgb(51, 51, 51);
    font-size: 15px;
    font-weight: bold;
    width 100%
    position relative

.edit-close
    position absolute
    height 24px
    width 24px
    right 15px

.address-list
    flex-grow 1
    display flex
    width 100%
    flex-direction column
    overflow auto

.address-list::-webkit-scrollbar
    width 0

.address-list li
    padding: 16px 15px
    display flex
    justify-content space-between
    height 70px
    align-items center

.address-list li img
    width 24px
    height 24px

.address-list li>div
    flex-grow 1
    padding 0 9px;
    display flex
    flex-direction column


.address-list li>div p:nth-child(2)
    color: rgba(0, 0, 0, 0.8);
    font-size: 15px;
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 8px;
    margin-top: 2px;

.default-address
    color: rgb(180, 115, 31);
    font-size: 10px;
    border-radius 5px
    border 1px solid rgb(180, 115, 31)
    padding 2px

.address-list li>div>div>span:last-child
    margin-left 6px;
    color: rgb(51, 51, 51);
    font-size: 13px;

.address-list li>div p:last-child
    display flex
    justify-content space-between
    color: rgb(51, 51, 51);
    font-size: 13px;

.edit-footer
    height 40px
    flex-shrink 0
    display flex
    margin-bottom 10px

.edit-footer button
    width 350px
    background-image: linear-gradient(4.71239rad, rgb(223, 46, 46), rgb(245, 90, 55));
    border-radius: 20px;
    border 0
    color rgb(255, 255, 255);
    font-size: 15px;













.box-settlement
    width 100vw
    height 100vh
    display flex
    flex-direction column
    background-color: rgb(244, 244, 244);

.content 
    flex-grow 1
    display flex
    flex-direction column
    overflow auto


.content::-webkit-scrollbar
    width 0 !important

.nav
    background url('@/assets/img/Settlement/bg_page_header.png')
    background-size: 100% 160px;
    background-repeat: no-repeat;

.nav-title
    height 88px
    display flex
    align-items center
    justify-content center
    position relative
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bold;

.back-cart
    position absolute
    top 50%
    left 12px
    transform translateY(-50%)
    color rgb(238, 238, 238);
    
.address-card
    min-height: 82px;    
    padding 0 10px
    display flex
    

.card
    background-color #fff
    flex-grow 1
    padding 0 10px
    border-radius 10px
    display flex
    align-items center

.info-box
    height 100%
    display flex
    flex-direction column
    justify-content space-evenly

.address 
    color: rgb(51, 51, 51);
    font-size: 14px;

.region
    color: rgb(51, 51, 51);
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;

.info
    color: rgb(51, 51, 51);
    font-size: 14px;
    line-height: 19px;
.info-box
    flex-grow 1

.container
    margin 0 10px
    margin-top 10px
    display flex
    flex-direction: column;

.container
    display flex
.container
.container li
    flex-grow 1 
    background-color #fff
    border-radius 10px
    padding 11px 0 13px 10px
    margin-top 10px
.item-top
    display flex
    margin-bottom 22px

.item-top>div
    flex-grow 1
    margin 0 10px
    display flex
    flex-direction column
    justify-content space-evenly

.item-top>div p:first-child
    color: rgb(51, 51, 51);
    font-size: 14px;

.item-top>div p:nth-child(2)
    display flex
    justify-content space-between
    color: rgb(51, 51, 51);
    font-size: 12px;
    
.item-top>div p:nth-child(2) span:first-child
    color #bf1111
    font-size 15px

.item-top>div p:last-child
    color: rgb(191, 17, 17);
    font-size: 10px;
.item-top img
    width 86px
    height 86px
    
.item-bottom
    display flex
    flex-direction column
    color: rgb(51, 51, 51);
    font-size: 14px;
    height 114px
    justify-content: space-evenly;

.item-bottom div:first-child
    display flex
    justify-content space-between


.item-bottom div:first-child>div
    display flex
    justify-content: space-evenly;
    align-items: center;
    letter-spacing: 0.7px;

.item-bottom div:nth-child(2)
    display flex
    justify-content space-between

.item-bottom div:nth-child(2) span:last-child
    padding-right 14px

.count
    font-weight: bold;

.item-bottom div:last-child
    display flex

.item-bottom div:last-child>input 
    flex-grow 1
    margin-left 12px  
    border 0

.last-info
    height 120px
    margin 10px
    display flex
    flex-direction column
    background-color #fff
    border-radius 10px
    padding 10px
    justify-content space-evenly
    color: rgb(51, 51, 51);
    font-size: 14px;
    letter-spacing: 0.11px;

.last-info li
    display flex
    justify-content space-between

.last-info li p:last-child
    padding-right 20px

.low-price
    color: rgb(191, 17, 17);

.not-use
    color: rgb(153, 153, 144);

.footer
    flex-shrink 0
    height 54px
    background-color #fff
    display flex
    justify-content space-between
    padding-left 20px
    align-items center

.footer>div
    flex-grow 1
    display flex
    align-items center

.footer>div p
    color: rgb(51, 51, 51);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1px;
    margin-bottom: -4px;

.total
    color: rgb(191, 17, 17);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 33px;

.not-money
    color: rgb(51, 51, 51);
    font-size: 13px;
    font-weight: bold;
    margin-bottom: -4px;
    margin-left: 4px;

.footer button
    width 100px
    height 38px
    background-color: rgb(191, 17, 17);
    border-radius: 20px;
    border 0
    margin-right: 8px;
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: bold;

</style>
